<template>
	<view class="page">

		<z-paging ref="paging" v-model="list" @query="queryList" :loading-more-enabled="false"
			empty-view-img="/reading/static/noBook.gif"
			:empty-view-img-style="{'border-radius': '50%','width':'150px','height':'150px'}" empty-view-text="书架暂无书籍"
			:empty-view-title-style="{'font-size':'15px','margin-top':'30px'}" empty-view-reload-text="去书城找书">
		
			<view class="content">

				<uni-row :gutter="20">
					<uni-col :span="8" v-for="(item,index) in list" :key="index">
						<view class="book">
							<view class="cover" :style="{'background-color':colors[index%10]}"
								@click="tocontent(index)">
								{{item.title}}
								<view class="count">{{getBookCata(item)}}</view>
							</view>
							<view class="title">
								<uni-icons @click="deleteBook(index)" type="trash" color="red"></uni-icons>
								{{item.title}}
							</view>
						</view>
					</uni-col>
				</uni-row>

			</view>

		

		</z-paging>
		<moveView tabTitle='书架'></moveView>
	</view>
</template>
<script>
	import moveView from '/reading/components/moveView.vue'
	export default {
		components:{
			moveView
		},
		onShareAppMessage(res) {
			return {
				title: '免费笔趣阁小说阅读器，看书软件，汇聚热门小说，免费阅读全本小说。7喵番茄米读小说，免费追书神器，书荒推荐',
				// path: '/pages/book/index'
			}
		},
		onShareTimeline() {
			return {
				title: "免费笔趣阁小说阅读器，看书软件，汇聚热门小说，免费阅读全本小说。7喵番茄米读小说，免费追书神器，书荒推荐",

			}
		},
		data() {
			return {
				list: [],
				colors: ["#2db7f5", "#19be6b", "#ff9900", "#ed4014", "#17233d", '#0097b2', '#00bf63', '#8c52ff', '#38b6ff',
					'#004aad'
				],
				bookSet: uni.getStorageSync("bookSet"),
				

			}
		},
		onLoad() {

			//定时更新本地书籍章节数据信息
			// this.checkBookCata();
			uni.$on("uploadBook", () => {
				this.$refs.paging.reload();
			})
			
		},
		onUnload() {
			uni.$off("uploadBook")
		},
		onShow() {

			var list = uni.getStorageSync("book");
			if (!list || list.length == 0) {

			} else {
				this.list = list;
			}
			
		},
		methods: {

			toShop() {
				uni.switchTab({
					url: '/pages/shop/index'
				})
			},
			queryList() {
				var list = uni.getStorageSync("book");
				this.$refs.paging.complete((!list || list.length == 0) ? [] : list);
				this.checkBookCata();
			},
			checkBookCata() {
				var list = uni.getStorageSync("book");
				this.list = list;
				if (list && list.length > 0) {
					this.list.forEach(a => {
						if (a.type && (a.type == "local_txt" || a.type == "help")) {

						} else {
							this.updateBookCata(a.url)
						}

					})
				}
			},
			updateBookCata(url) {
				uniCloud.callFunction({
					name: 'router',
					data: {
						action: 'book/getBookCata',
						data: {
							url: url
						}
					}
				}).then(res => {

					var list = res.result;
					if (list.length > 0) {
						var directoryList = list.map((a, index) => {
							return {
								index: index,
								chapterId: a
									.url, //注意：这个chapterId用于获取章节内容而不是index
								name: a.title
							}
						})
						//更新这个书籍的本地目录缓存
						uni.setStorage({
							key: `book_cata:${url}`,
							data: directoryList
						});
					}

				})
			},

			deleteBook(index) {
				var that = this;
				var model = this.list[index];
				uni.showModal({
					title: '提示',
					content: `确认移除《${model.title}》么？删除后会删除书籍缓存无法恢复`,
					success: (res) => {
						if (res.confirm) {
							this.list.splice(index, 1);

							uni.setStorageSync("book", this
								.list);
							
							uni.removeStorageSync(`book_content:${model.url}`);
							uni.removeStorageSync(`book_cata:${model.url}`);

							setTimeout(() => {
								var list = uni.getStorageSync("book");
								that.$refs.paging.complete((!list || list.length == 0) ? [] : list);
							}, 500)
						}
					}
				})
			},
			getBookCata(model) {
				if (model.type && model.type == "local_txt") {
					return "本地txt";
				}
				var cata = uni.getStorageSync(`book_cata:${model.url}`);
				var count = 0;
				if (cata && cata.length > 0) {
					count = cata.length;
				};
				if (count == 0) {
					return "未读过"
				}
				let history = uni.getStorageSync('history');
				if (typeof history !== 'object') {
					history = []
				}
				var list = history.filter(a => {
					return a.bookId == model.bookId;
				});
				var index = 0;
				if (list && list.length > 0) {
					var his = list[0];
					index = his.chapterIndex;
				}
				var diff = count - index - 1;
				if (diff <= 0) {
					return "已读完";
				}
				return `${diff}章未读`
			},

			tocontent(index) {
				var model = this.list[index];
				if (model.type && model.type == "local_txt") {
					uni.navigateTo({
						url: `/pages/read/readtxt?title=${model.title}&index=${model.index || 0}&url=${encodeURIComponent(model.bookId)}&id=${model.id}`
					})
					return;
				}
				if (model.type == "help") {
					uni.navigateTo({
						url: '/pages/webview/index'
					})
					return;
				}
				uni.navigateTo({
					url: `/reading/pages/read/index?title=${model.title}&index=${model.index || 0}&url=${encodeURIComponent(model.url)}&id=${model.id}`
				});
			},
		}
	}
</script>
<style lang="scss">
	moveView{
		width: 100vw;
		height: 50vh;
		position: fixed;
		bottom: 0;
		left: 0;
	}
	.content {
		display: flex;
		flex-direction: column;
		padding-left: 20px;
		padding-right: 20px;
		padding-top: 20px;
	}

	.import {
		margin-left: 50px;
		margin-right: 50px;
		margin-bottom: 20px;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.search {}

	.book {
		display: flex;
		flex-direction: column;
		align-items: center;

		.cover {
			width: 100%;
			height: 150px;
			font-size: 15px;
			padding-top: 15px;
			padding-left: 5px;
			border-radius: 4px;
			color: #fff;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.count {
				font-size: 8px;
				text-align: right;
				margin-right: 10px;
				margin-bottom: 10px;
			}
		}

		.title {
			font-size: 15px;
			margin-top: 5px;
			height: 45px;
			/**适⽤范围：因使⽤了WebKit的CSS扩展属性，该⽅法适⽤于WebKit浏览器及移动端；**/
			display: -webkit-box; //将对象作为弹性伸缩盒⼦模型显⽰
			-webkit-box-orient: vertical; //设置或检索伸缩盒对象的⼦元素的排列⽅式
			-webkit-line-clamp: 2; //⼀个块元素显⽰的⽂本的⾏数
			overflow: hidden; //溢出隐藏
		}
	}
</style>